<script setup lang="ts">
import { h, onMounted, reactive, ref, type VNode } from "vue";
import type { pluginOption } from "./types";

import L from "leaflet";
import minimap from "leaflet-minimap";
import "leaflet-ant-path";
// import markerPlayer from "./markerplayer-src.js";
import * as markerPlayer from "leaflet.markerplayer";

onMounted(() => {
    getDom(); // 获取 dom
    createMap(); // 创建地图
    createMiniMap(); // 创建导航图
    createAntPath(); // 创建蚂蚁路径
    createMarkerPlayer(); // 标点动画
});

/* data */
const plugins = reactive<pluginOption[]>([
    { label: "leaflet.minimap" },
    { label: "leaflet.antPath" },
    { label: "leaflet.markerplayer" },
]); // 所使用的 插件
let map: L.Map; // 地图实例
let container: HTMLDivElement;
// ant path
let antPath: any;
let antPathOption = ref({
    isPlay: true,
    reverse: false,
});
// marker player
let player: any;
let progress = ref(0);

// 创建 底图
const createMap = () => {
    const baseLayer = L.tileLayer(
        // "http://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=8f2e4765bfc57236fb6c6226568a6b8c",
        "https://imspipeline.pipechina.com.cn:6080/satellite?service=WMTS&request=GetTile&version=1.0.0&style=default&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&format=image/jpeg",
        {
            tileSize: 256,
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
            zoomOffset: 0,
        }
    ); // 地图 基础影像

    map = L.map(container, {
        crs: L.CRS.EPSG3857,
        layers: [baseLayer],
        center: [39.918046, 116.396952],
        zoom: 10,
        zoomControl: false,
        attributionControl: false,
    }).on("click", (event) => {
        console.log(event.latlng);
    }); // 地图实例
};

// 创建 导航图
const createMiniMap = () => {
    const miniLayer = L.tileLayer(
        "https://imspipeline.pipechina.com.cn:6080/satellite?service=WMTS&request=GetTile&version=1.0.0&style=default&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&format=image/jpeg",
        {
            tileSize: 256,
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
            zoomOffset: 0,
        }
    ); // 导航图 基础影像

    const mini = new minimap(miniLayer, {
        width: container.clientWidth / 10,
        height: container.clientHeight / 10,
        collapsedWidth: container.clientWidth / 30,
        collapsedHeight: container.clientHeight / 30,
    }).addTo(map); // 导航图实例
};

// 创建蚂蚁路径
const createAntPath = () => {
    const latlngs: [number, number][] = [
        [40.07499207053241, 115.94970703125001],
        [39.63229837548497, 115.91262817382814],
        [39.62489596856648, 116.83822631835939],
        [40.07604269433076, 117.04147338867189],
    ];
    antPath = L.polyline.antPath(latlngs).addTo(map);
};
const changePlay = (value: boolean) => {
    if (value) {
        antPath.pause();
    } else {
        antPath.resume();
    }
};
const changeReverse = () => {
    antPath.reverse();
};

// 创建路径播放
const createMarkerPlayer = () => {
    console.log(markerPlayer.markerPlayer);
    player = markerPlayer
        .markerPlayer(
            [
                { latlng: [40.07499207053241, 115.94970703125001] },
                { latlng: [39.63229837548497, 115.91262817382814] },
                { latlng: [39.62489596856648, 116.83822631835939] },
                { latlng: [40.07604269433076, 117.04147338867189] },
            ],
            30000,
            {}
        )
        .on(
            "progresschange",
            (event: L.LeafletEvent & { progress: number }) => {
                console.log(event.progress);
                progress.value = event.progress;
            }
        )
        .addTo(map);
};
const playerHandel = (flag: "play" | "pause" | "stop") => {
    switch (flag) {
        case "play":
            player.start();
            break;
        case "pause":
            player.pause();
            break;
        case "stop":
            player.stop();
            progress.value = 0;
            break;
    }
};

/* dom */
const getDom = () => {
    container = document.getElementById("map-container") as HTMLDivElement; // 地图容器
};
</script>

<template>
    <div class="container">
        <!-- 地图容器 -->
        <div id="map-container"></div>

        <!-- 插件 -->
        <el-card
            class="plugins"
            header="Plugins"
            :body-style="{ width: '300px' }"
        >
            <el-collapse>
                <el-collapse-item
                    v-for="item in plugins"
                    :key="item.label"
                    :title="item.label"
                    :name="item.label"
                >
                    <!-- antPath -->
                    <template v-if="item.label === 'leaflet.antPath'">
                        <el-form label-position="top">
                            <el-form-item label="animation">
                                <el-checkbox
                                    v-model="antPathOption.isPlay"
                                    border
                                    @change="changePlay"
                                >
                                    暂停
                                </el-checkbox>
                                <el-checkbox
                                    v-model="antPathOption.reverse"
                                    border
                                    @change="changeReverse"
                                >
                                    翻转
                                </el-checkbox>
                            </el-form-item>
                        </el-form>
                    </template>
                    <!-- marker player -->
                    <template v-else-if="item.label === 'leaflet.markerplayer'">
                        <el-button @click="playerHandel('play')"
                            >播放</el-button
                        >
                        <el-button @click="playerHandel('pause')"
                            >暂停</el-button
                        >
                        <el-button @click="playerHandel('stop')"
                            >停止</el-button
                        >
                        <el-progress :percentage="progress" />
                    </template>
                </el-collapse-item>
            </el-collapse>
        </el-card>
    </div>
</template>

<style lang="less" scoped>
.container {
    height: 100%;
    position: relative;

    #map-container {
        height: 100%;
    }

    .plugins {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 401;
    }
}
</style>
